import React, { useEffect, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Divider } from '@material-ui/core';
import { Section, SectionAlternate } from 'components/organisms';
import { useSelector, useDispatch } from 'react-redux'
import { setLoading } from 'redux/actions/LoadingActions';
import {
  Categories,
  Hero,
  Reviews,
  Courses,
  Banner,
} from './components';
import { useParams } from "react-router-dom";
import { callGetApi } from 'utils/networking';

const useStyles = makeStyles(theme => ({
  coursesSection: {
    //maxWidth: 800,
    margin: '0 auto',
  },
  paddingBottom0: {
    paddingBottom: 0,
  },
  sectionAlternate: {
    background: 'transparent',
    backgroundImage: `linear-gradient(180deg, ${theme.palette.background.paper} 40%, ${theme.palette.primary.dark} 0%)`,
  },
}));

const Community = () => {
  const classes = useStyles();
  const dispatch = useDispatch()

  const [topicList, setTopicList] = useState([]);
  let { id } = useParams();
  const category = useSelector((state) => state.community.communityCategoryData)
  const search_keyword = '';

  useEffect(() => {
    getServerSideProps()
  }, [])

  const getServerSideProps = async () => {
    callGetApi(`blog/search?category_id=${id}&search_key=${search_keyword}&limit=20&offset=${topicList.length}`, dispatch, (data) => {
      setTopicList(data.data);
    })
  }

  return (
    <div>
      <Banner />
      <Hero data={category} />
      <SectionAlternate>
        <Courses data={topicList} className={classes.coursesSection} />
      </SectionAlternate>
      <div style={{ height: "100px" }}></div>
    </div>
  );
};

export default Community;
